
var box = document.getElementById("box");
var imgWidth = box.children[0].offsetWidth;
var ul = box.children[0].children[0];
var boxLeftRight = box.children[1];
var btnArr = boxLeftRight.children;

//鼠标放上去显示，移开隐藏
box.onmouseover = function () {
    boxLeftRight.style.display = "block";
}
box.onmouseout = function () {
    boxLeftRight.style.display = "none";
}

//2.点击右侧盒子图片向做移动并用计数器模拟index值。
//定义计数器
var index = 0;

btnArr[1].onclick = function () {
    index++;
    //我们要对index的值进行约束。index的值必须在[0,4]
    if(index>ul.children.length-1){
        index = ul.children.length-1;
        alert("到头了！");
    }
    //点击盒子以后移动图片（ul，和目标位置）
    animate(ul,-index*imgWidth);
}

//3，点击左侧盒子，同理。
btnArr[0].onclick = function () {
    index--;
    if(index<0){
        index = 0;
        alert("第一张！");
    }
    //点击盒子以后移动图片（ul，和目标位置）
    animate(ul,-index*imgWidth);
}


function animate(ele,target){
    //clearInterval(ele.timer);
    var speed = target>ele.offsetLeft?10:-10;
    ele.timer = setInterval(function () {
        var val = target - ele.offsetLeft;
        ele.style.left = ele.offsetLeft + speed + "px";
        if(Math.abs(val)<Math.abs(speed)){
            ele.style.left = target + "px";
            clearInterval(ele.timer);
        }
    },10)
}
